<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Route Admin Panel</title>
    <link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" href="fontawesome/css/all.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/range_slider.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/swiper.min.css">
</head>

<script src="/socket.io/socket.io.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/nav_interface.js"></script>
<script src="js/konva.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<body class="bg-light">

    <nav class="navbar navbar-expand-lg navbar-light bg-light py-0">
        <a class="navbar-brand" href="#"><img src="img/husarion_logo.png" height="25px"></a>
        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse noselect" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" onclick="addTargetDialog()" data-toggle="collapse"
                        data-target="#navbarSupportedContent">Add target</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" onclick="saveCurrentPosition()" data-toggle="collapse"
                        data-target="#navbarSupportedContent">Save current position</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" onclick="showMapSettingsDialog()" data-toggle="collapse"
                        data-target="#navbarSupportedContent">Map settings</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" onclick="showPathCreatorDialog()" data-toggle="collapse"
                        data-target="#navbarSupportedContent">Create path</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" onclick="showRouteManagerDialog()" data-toggle="collapse"
                        data-target="#navbarSupportedContent">Set route</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" onclick="stopRoute()" data-toggle="collapse"
                        data-target="#navbarSupportedContent">Stop route</a>
                </li>
                <li class="nav-item">
                    <div class="nav-link" id="route-status"></div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Views
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <div class="dropdown-item">
                            <input type="checkbox" class="form-check-input" id="targetLabelsCheckbox">
                            <label class="form-check-label" for="targetLabelsCheckbox" data-toggle="collapse"
                                data-target="#navbarSupportedContent">Target labels</label>
                        </div>
                        <div class="dropdown-item">
                            <input type="checkbox" class="form-check-input" id="targetsTableCheckbox">
                            <label class="form-check-label" for="targetsTableCheckbox" data-toggle="collapse"
                                data-target="#navbarSupportedContent">Targets table</label>
                        </div>
                        <div class="dropdown-item">
                            <input type="checkbox" class="form-check-input" id="zoomCheckbox">
                            <label class="form-check-label" for="zoomCheckbox" data-toggle="collapse"
                                data-target="#navbarSupportedContent">Zoom slider</label>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </nav>

    <div id="pathCreatorDialog" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Path creator</h4>
                </div>
                <div class="modal-body">
                    <h5 class="text-center">Stations</h5>

                    <div>Loading:
                        <select name="loading-station" id="loading-station">
                        </select>
                    </div>
                    <div>Unloading:
                        <select name="unloading-station" id="unloading-station">
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"
                        onclick="dismissPathCreatorDialog()">Cancel</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="createPath()">Create
                        path</button>
                </div>
            </div>
        </div>
    </div>

    <div id="routeManagerDialog" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Route manager</h4>
                </div>
                <div class="modal-body">
                    <h5 class="text-center">Planned route</h5>
                    <table class="table table-sm" id="route_table">
                        <thead>
                            <tr>
                                <th scope="col">Position [x, y, theta]</th>
                                <th scope="col">Label</th>
                                <th scope="col">Edit</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>

                    <div>Sequence mode:</div>
                    <label class="mx-2 my-0"><input type="radio" name="mode" value="run_sequence_once">Single
                        run</label>
                    <label class="mx-2 my-0"><input type="radio" name="mode" value="run_sequence_in_loop" checked>Loop
                        run</label>
                    <label class="mx-2 my-0"><input type="radio" name="mode" value="run_sequence_back_and_forth">Back
                        and
                        forth</label>

                    <h5 class="text-center mt-4">Defined poses</h5>
                    <table class="table table-sm" id="existing_poses">
                        <thead>
                            <tr>
                                <th scope="col">Position [x, y, theta]</th>
                                <th scope="col">Label</th>
                                <th scope="col">Add to route</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"
                        onclick="dismissRouteManagerDialog()">Cancel</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="startRoute()">Start
                        route</button>
                </div>
            </div>
        </div>
    </div>

    <div id="saveCurrentPosDialog" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Add target</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-light">
                        <tbody>
                            <tr>
                                <th scope="col">X [m]</th>
                                <td id="currentPosX"></td>
                            </tr>
                            <tr>
                                <th scope="col">Y [m]</th>
                                <td id="currentPosY"></td>
                            </tr>
                            <tr>
                                <th scope="col">Theta [°]</th>
                                <td id="currentPosTheta"></td>
                            </tr>
                            <tr>
                                <th scope="col">Label</th>
                                <td>
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="currentPosLabel"
                                            placeholder="Target label">
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"
                        onclick="dismissCurrentPosDialog()">Cancel</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal"
                        onclick="saveCurrentPosConfirm()">Save target</button>
                </div>
            </div>
        </div>
    </div>

    <div id="mapSettingsDialog" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Map settings</h4>
                </div>
                <div class="modal-body">
                    <div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
                        <label class="btn btn-secondary active w-100" onClick="showMapSettingsTab()">
                            <input type="radio" name="options" id="option1" checked>Settings
                        </label>
                        <label class="btn btn-secondary w-100" onClick="showMapUploadTab()">
                            <input type="radio" name="options" id="option2">Upload custom map
                        </label>
                    </div>
                    <div class="m-3">
                        <div id="mapSettingsTab">
                            <p>
                                You can choose to load prevoiusly created or uploaded static map or to build new map
                                in SLAM process.
                            </p>
                            <form>
                                <div class="mx-2 my-1">Map type:</div>
                                <label class="mx-2 my-0" onClick="enableMapFileDropdown()">
                                    <input type="radio" name="mode" id="map_mode_static" value="map_mode_static">Static
                                    map
                                </label>
                                <label class="mx-2 my-0" onClick="disableMapFileDropdown()">
                                    <input type="radio" name="mode" id="map_mode_slam" value="map_mode_slam"
                                        checked>SLAM
                                    generated
                                </label>
                                <div class="mx-2 my-1">Map file: </div>
                                <select name="map-file-select" id="mapFileDropdown">
                                    <option value="noselect">Choose file...</option>
                                </select>
                                <div class="mx-2 my-1">Auto save:</div>
                                <label class="mx-2 my-0">
                                    <input type="checkbox" id="mapAutoSaveCheckbox" checked>Enable
                                </label>
                            </form>
                            <button type="button" class="btn btn-default w-100" onclick="setRobotPose()">Set current
                                robot pose</button>
                        </div>
                        <div id="mapUploadTab">
                            <p>You can upload custom map for robot. Selected map must follow below rules:
                                <ul>
                                    <li>Map is a grayscale image.</li>
                                    <li>White pixels determine free area.</li>
                                    <li>Black pixels determine obstacles.</li>
                                    <li>Gray pixels determine unknown area.</li>
                                </ul>
                            </p>
                            <form method="post" action="/upload" enctype="multipart/form-data" id="map-upload-form"
                                class="form-group">
                                <div class="form-group">
                                    <label for="mapResolution">Resolution [meter/pixel]</label>
                                    <input type="number" step="0.01" min="0" name="mapResolution" id="mapResolution"
                                        placeholder="resolution" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="map-image">Map file</label>
                                    <input type="file" class="form-control-file" name="map-image" id="map-image">
                                </div>
                            </form>
                            <progress class="progress-bar bg-success" id="mapUploadProgress"></progress>
                            <button type="button" class="btn btn-default w-100"
                                onclick="uploadCustomMapConfirm()">Upload
                                map</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"
                        onclick="dismissMapSettingsDialog()">Cancel</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal"
                        onclick="saveMapSettings()">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div id="zoom-container">
        <input class="form-control-range" type="range" id="map-zoom" min="5" max="100" value="100">
    </div>

    <div id="konva-container">
    </div>

    <div class="tableFixHead bg-dark noselect" id="table-container">
        <table class="table-sm table-dark" id="targets">
            <thead>
                <tr>
                    <th scope="col">X [m]</th>
                    <th scope="col">Y [m]</th>
                    <th scope="col">Theta [°]</th>
                    <th scope="col">Label</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <div id="labels-container" class="noselect"></div>

</body>

</html>